<template>
  <div id="sotoreList">
    <c-title :hide="false" :text="'服务门店'"> </c-title>
    <div class="main">
      <div class="txtbox">
        <div class="line"></div>
        <div class="txt">该项目附近可服务门店</div>
      </div>
      <div class="lis" v-for="(item, index) in store" :key="index" @click="toRouter(item.id)">
        <div class="image">
          <img :src="item.thumb" alt="" />
        </div>
        <div class="right">
          <div class="right_top">
            <div class="title">{{ item.store_name }}</div>
            <div class="iconT">
              <img src="https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/images/project_details_shop@2x.png" alt="" />
            </div>
          </div>
          <div class="time">营业时间：{{ item.business_hours_start }}-{{ item.business_hours_end }}</div>
          <div class="addressPath">
            <i class="iconfont icon-icon_location"></i>
            <div class="addressGoods">{{ item.address }}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { scrollMixin } from "../../utils/mixin"; //引入加载更多
export default {
  mixins: [scrollMixin],
  data() {
    return {
      store: [],
      isLoadMore: false,
      total_page: 0,
      page: 1
    };
  },
  activated() {
    this.page = 1;
    this.getData();
  },
  methods: {
    toRouter(id) {
      this.$router.push(this.fun.getUrl("HomeSeller", { store_id: id, fromHome: 1 }));
    },
    getData() {
      $http
        .get(
          "plugin.appointment.frontend.project.getDetailStore",
          {
            lng: this.$route.query.lng,
            lat: this.$route.query.lat,
            project_id: this.$route.query.project_id
          },
          "获取中"
        )
        .then(response => {
          if (response.result === 1) {
            this.isLoadMore = true;
            this.total_page = response.data.last_page;
            if (!this.total_page) {
              this.total_page = 0;
            }
            this.store = response.data.data;
          } else {
            this.$dialog.alert({ message: response.msg });
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    getMoreData() {
      const that = this;
      if (!this.isLoadMore) {
        return;
      }
      that.isLoadMore = false; // 防止多次请求分页数据
      if (this.page >= this.total_page) {
        return;
      } else {
        this.page = this.page + 1;
        $http
          .get(
            "plugin.appointment.frontend.project.getDetailStore",
            {
              lng: this.$route.query.lng,
              lat: this.$route.query.lat,
              project_id: this.$route.query.project_id,
              page: that.page
            },
            "加载中"
          )
          .then(
            response => {
              if (response.result === 1) {
                var myData = response.data.data;
                that.store = that.store.concat(myData); //数组拼接
                that.isLoadMore = true;
              } else {
                that.page = that.page - 1;
                that.isLoadMore = false;
                return;
              }
            },
            function (response) {
              // error callback
            }
          );
      }
    }
  }
};
</script>
<style lang="scss" scoped>
#sotoreList {
  // background: #fff;
  // height: 100vh;
}

.main {
  background: #fff;
  padding: 0.9375rem 0.9063rem 0.9375rem 0.9375rem;

  .lis {
    display: flex;
    padding: 0.875rem 0;
    border-bottom: 1px solid #f5f5f5;

    .image {
      width: 4.0625rem;
      height: 4.0625rem;
      border-radius: 0.125rem;

      img {
        width: 4.0625rem;
        height: 4.0625rem;
        background: #f5f5f5;
        border-radius: 4px;
      }
    }

    .right {
      overflow: hidden;
      flex: 1;
      display: flex;
      flex-direction: column;
      margin-left: 0.5938rem;
      justify-content: space-between;

      .addressPath {
        display: flex;
        align-items: center;
        width: 100%;

        .iconfont {
          color: #ce811d;
          font-size: 14px;
          flex-shrink: 0;
        }

        .addressGoods {
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }

      .time {
        text-align: left;
      }

      .right_top {
        width: 100%;
        display: flex;
        justify-content: space-between;

        .title {
          font-size: 0.9375rem;
          font-weight: 400;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }

        .iconT {
          width: 0.8125rem;
          height: 0.75rem;
          flex-shrink: 0;

          img {
            width: 100%;
            height: 100%;
          }
        }
      }
    }
  }

  .txtbox {
    display: flex;
    align-items: center;

    .line {
      width: 0.125rem;
      height: 0.8125rem;
      background: #ce811d;
      border-radius: 0.0625rem;
    }

    .txt {
      font-size: 1rem;
      font-weight: 400;
      color: #333;
      line-height: 1.5rem;
      margin-left: 0.4375rem;
    }
  }
}
</style>